<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        .login-demo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            box-shadow: 0 0 15px #aaa;
            padding: 36px;
            color: #333;
            font-weight: 500;
            font-size: 16px;
            transition: all .3s;
            border-radius: 12px;
        }
        .login-demo .login-input,
        .login-demo .login-button {
            width: 320px;
            height: 48px;
            box-sizing: border-box;
            margin-bottom: 24px;
        }
        .login-demo .login-input {
            padding-left: 16px;
            border: none;
            border-bottom: 1px solid #ddd;
        }
        .login-demo .login-input:focus {
            outline: none;
            border:2px solid lightblue;
            border-radius: 4px;
        }
        .login-demo .login-button {
            margin-bottom: 0;
            background-color: blue;
            color: #fff;
            letter-spacing: 2px;
            border-radius: 4px;
            cursor: pointer;
        }
        .login-demo .login-button,
        .login-demo .login-button:focus {
            outline: none;
            border: none;
        }
    </style>
</head>
<body>
    <form method="POST" id="login-form">
        <div class="login-demo">
            <input type="text" class="login-input" required placeholder="请输入账号" name="userName">
            <br>
            <input type="password" class="login-input" required placeholder="请输入密码" name="password">
            <br>
            <button type="button" class="login-button">登录</button>
        </div>
    </form>
</body>
<script src="./consts.js"></script>
<script src="./request.js"></script>
<script src="./service.js"></script>
<script>
    const loginForm = document.querySelector('#login-form')
    const loginBtn = document.querySelector('.login-button')

    const handleLogin = async function(event){
        // 获取输入数据
        const formData = new FormData(loginForm)
        const userName = formData.get('userName').trim()
        const password = formData.get('password').trim()
        if(!(userName && password)){
            alert('请输入账号密码')
            return;
        }
        const userInfo = {
            userName,
            password
        }
        // 通过请求发送数据
        const res = await login(userInfo)
        console.log('login.html:',res);
        !res.success && alert(res.msg)
        if(res.success) {
            localStorage.setItem('userName',res.userName)
            res.token && localStorage.setItem('token',res.token) //把token存入localstorage
            window.location.href = '/home.html'
        }

        event.preventDefault()
    }

    loginBtn.addEventListener('click',handleLogin)
</script>
</html>